<template>
  <div class="map">
    <a-spin :spinning="spinning">
      <div>
        <a-row>
          <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="8"> </a-col>
          <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="8">
            <div style="margin-top: 10%">
              <h1>百度地图瓦片下载</h1>
              <a-form
                id="components-form-demo-normal-login"
                :form="form"
                class="login-form"
                @submit="handleSubmit"
              >
                <a-form-item>
                  <a-input
                    v-decorator="[
                      'top',
                      {
                        rules: [{ required: true, message: '请输入左上坐标!' }],
                      },
                    ]"
                    placeholder="请输入左上坐标！ 例如 109.198053,34.710625 "
                  >
                    <a-icon
                      slot="prefix"
                      type="compass"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>

                <a-form-item>
                  <a-input
                    v-decorator="[
                      'right',
                      {
                        rules: [{ required: true, message: '请输入右下坐标!' }],
                      },
                    ]"
                    placeholder="请输入右下坐标！ 例如 109.212175,34.702968 "
                  >
                    <a-icon
                      slot="prefix"
                      type="compass"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-decorator="[
                      'fileName',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请输入写入到本地的文件名!',
                          },
                        ],
                      },
                    ]"
                    placeholder="请输入写入到本地的文件名！ 例如 中华郡 "
                  >
                    <a-icon
                      slot="prefix"
                      type="file"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-select
                    mode="multiple"
                    placeholder="请选择瓦片层级"
                    :value="selectedItems"
                    style="width: 100%"
                    @change="handleChange"
                  >
                    <a-select-option
                      v-for="item in filteredOptions"
                      :key="item"
                      :value="item"
                    >
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item>
                  <span
                    ><a-slider v-model="inputValue1" :min="1" :max="50"
                  /></span>
                  <span
                    >线程数量：<a-input-number
                      v-model="inputValue1"
                      :min="1"
                      :max="50"
                      style="margin-left: 10px; width: 70px"
                  /></span>
                </a-form-item>

                <a-form-item>
                  <a-button
                    icon="download"
                    :loading="spinning"
                    type="primary"
                    html-type="submit"
                    class="login-form-button"
                  >
                    下载
                  </a-button>
                  <a-button
                    type="primary"
                    v-show="file"
                    class="login-form-button"
                    @click="show(true)"
                  >
                    打开文件下载位置
                  </a-button>
                  <a-button
                    type="danger"
                    class="login-form-button"
                    @click="show(false)"
                  >
                    关闭程序
                  </a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script>
const OPTIONS = [];
for (let i = 4; i < 20; i++) {
  OPTIONS.push(i);
}
export default {
  name: "map",
  data() {
    return {
      selectedItems: [],
      inputValue1: 1,
      spinning: false,
      time: null,
      file: false,
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  computed: {
    filteredOptions() {
      return OPTIONS.filter((o) => !this.selectedItems.includes(o));
    },
  },
  methods: {
    show(b) {
      var that = this;
      that.$axios
        .get(b ? "/openFile" : "stop")
        .then(function (response) {
          if (response.data.code == 200) {
            that.$message.success(response.data.msg);
            if (!b) {
              that.spinning = true;
            }
          }
        })
        .catch(function (error) {
          that.$message.error("操作异常" + error);
        });
    },
    openNotification(title, msg) {
      this.$notification.open({
        message: title,
        description: msg,
        icon: <a-icon type="smile" style="color: #108ee9" />,
      });
    },
    getDownlaodMsgState() {
      var that = this;
      that.time = window.setInterval(() => {
        that.$axios
          .get("/getState")
          .then(function (response) {
            if (response.data.code == 200 || response.data.code == 201) {
              that.openNotification("提示", response.data.msg);
              if (response.data.code == 200 && that.time !== null) {
                clearInterval(that.time);
                that.spinning = false;  
                that.file = true;
              }
            } else {
              that.$message.error("操作异常");
            }
          })
          .catch(function (error) {
            that.$message.error(error);
          });
      }, 1000);
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        this.file = false;
        if (!err) {
          if (this.selectedItems.length == 0) {
            this.$message.warning("请选择层级！");
            return;
          }
          values.zoomLevel = this.selectedItems.join(",");
          values.nums = this.inputValue1;
          this.$axios.post("/download", values).then((res) => {
            if (res.data.code == 200) {
              this.getDownlaodMsgState();
              this.spinning = true;
              this.$message.success("下载中！！！");
            } else {
              this.$message.error(res.data.msg);
              this.spinning = false;
            }
          });
        }
      });
    },
    handleChange(selectedItems) {
      this.selectedItems = selectedItems;
    },
  },
};
</script>

<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
